package com.example.shiyan3

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.shiyan3.ui.theme.Shiyan3Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Shiyan3Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ImageGalleryApp()
                }
            }
        }
    }
}

// 数据类定义图片信息
data class GalleryImage(
    val id: Int,
    val imageRes: Int,
    val title: String,
    val description: String
)

@Composable
fun ImageGalleryApp() {
    // 图片资源列表 - 假面骑士主题
    val galleryImages = listOf(
        GalleryImage(1, R.drawable.image1, "獠牙王牌", "风都的骑士·假面骑士W的最帅形态"),
        GalleryImage(2, R.drawable.image2, "高达", "机动战士高达·经典机甲造型"),
        GalleryImage(3, R.drawable.image3, "古伽", "平成老大哥·假面骑士空我"),
        GalleryImage(4, R.drawable.image4, "555", "假面骑士Faiz·经典的流氓蹲姿势")
    )

    // 使用remember保存当前选中的图片索引
    var currentImageIndex by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5))
            .padding(16.dp)
    ) {
        // 标题
        Text(
            text = "假面骑士陈列馆",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF333333),
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp),
            textAlign = TextAlign.Center
        )

        // 主图显示区域
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .padding(8.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
            shape = RoundedCornerShape(12.dp)
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Image(
                    painter = painterResource(id = galleryImages[currentImageIndex].imageRes),
                    contentDescription = galleryImages[currentImageIndex].description,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = ContentScale.Crop
                )
            }
        }

        // 图片描述区域 - 放在图片下方
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp)
        ) {
            Text(
                text = galleryImages[currentImageIndex].title,
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF333333),
                modifier = Modifier.padding(top = 8.dp)
            )
            Text(
                text = galleryImages[currentImageIndex].description,
                fontSize = 14.sp,
                color = Color(0xFF666666),
                modifier = Modifier.padding(top = 4.dp)
            )
        }

        Spacer(modifier = Modifier.height(24.dp))

        // 控制按钮区域
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            // 上一张按钮
            Button(
                onClick = {
                    currentImageIndex = if (currentImageIndex > 0) {
                        currentImageIndex - 1
                    } else {
                        galleryImages.size - 1
                    }
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color(0xFF2196F3)
                ),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "上一张", color = Color.White)
            }

            Spacer(modifier = Modifier.width(16.dp))

            // 下一张按钮
            Button(
                onClick = {
                    currentImageIndex = (currentImageIndex + 1) % galleryImages.size
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color(0xFF4CAF50)
                ),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = "下一张", color = Color.White)
            }
        }

        Spacer(modifier = Modifier.height(24.dp))

        // 缩略图陈列区域
        Text(
            text = "角色预览",
            fontSize = 18.sp,
            fontWeight = FontWeight.SemiBold,
            color = Color(0xFF333333),
            modifier = Modifier.padding(bottom = 8.dp)
        )

        // 缩略图网格
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp), // 增加高度以容纳文字
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            galleryImages.forEachIndexed { index, image ->
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.width(90.dp)
                ) {
                    ThumbnailItem(
                        image = image,
                        isSelected = index == currentImageIndex,
                        onClick = { currentImageIndex = index }
                    )
                    // 缩略图下方的标题
                    Text(
                        text = image.title,
                        fontSize = 12.sp,
                        color = if (index == currentImageIndex) Color(0xFF2196F3) else Color(0xFF666666),
                        fontWeight = if (index == currentImageIndex) FontWeight.Bold else FontWeight.Normal,
                        modifier = Modifier.padding(top = 4.dp),
                        textAlign = TextAlign.Center,
                        maxLines = 1
                    )
                }
            }
        }

        // 当前图片指示器
        Text(
            text = "当前展示: ${currentImageIndex + 1} / ${galleryImages.size}",
            fontSize = 14.sp,
            color = Color.Gray,
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            textAlign = TextAlign.Center
        )
    }
}

@Composable
fun ThumbnailItem(
    image: GalleryImage,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Card(
        onClick = onClick,
        modifier = Modifier
            .width(80.dp)
            .height(80.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = if (isSelected) 8.dp else 2.dp
        ),
        shape = RoundedCornerShape(8.dp),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) Color(0xFFE3F2FD) else Color.White
        )
    ) {
        Image(
            painter = painterResource(id = image.imageRes),
            contentDescription = image.description,
            modifier = Modifier
                .fillMaxSize()
                .padding(if (isSelected) 2.dp else 0.dp),
            contentScale = ContentScale.Crop
        )
    }
}

// 预览函数
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun DefaultPreview() {
    Shiyan3Theme {
        ImageGalleryApp()
    }
}

// 暗色主题预览
@Preview(showBackground = true, showSystemUi = true, uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
@Composable
fun DarkModePreview() {
    Shiyan3Theme {
        ImageGalleryApp()
    }
}

// 单个组件的预览
@Preview(showBackground = true)
@Composable
fun ThumbnailPreview() {
    Shiyan3Theme {
        ThumbnailItem(
            image = GalleryImage(1, R.drawable.image1, "獠牙王牌", "风都的骑士"),
            isSelected = true,
            onClick = {}
        )
    }
}